<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :span="17">
          <div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i>&nbsp;{{
                name
              }}
            </div>
            <div class="explain">
              考核周期：{{ info.startDate }}-{{ info.endDate }} 被考核地区：{{
                info.assessAreaName
              }}
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="rightBox">
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ info.allScore }}</h3>
              <p class="scoreStyleInfo">总分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ info.allSelfEvaluateScore }}</h3>
              <p class="scoreStyleInfo">自评分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ info.allAssessEvaluateScore }}</h3>
              <p class="scoreStyleInfo">上级评分</p>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row type="flex">
        <el-col :xl="4" :lg="6" :md="8" :sm="7" class="checkItems">
          <el-row>
            <el-col :span="6">考核项</el-col>
          </el-row>
          <el-row class="itemBox">
            <el-col :span="24">
              <template v-for="(item, index) in info.saveStatus">
                <el-col :span="6" :key="index">
                  <el-tooltip class="item" effect="dark">
                    <div slot="content">{{ item.itemName }}</div>
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      :class="['itemBtn', 'checkingBtn']"
                      style="border-color: transparent"
                      v-if="item.id == id"
                      >{{ item.sortCode }}</el-button
                    >
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      type="primary"
                      :class="['itemBtn', 'checkBtn']"
                      v-else-if="item.status == 1"
                      >{{ item.sortCode }}</el-button
                    >
                    <el-button
                      size="mini"
                      @click="tooltipIndex(index, item.id)"
                      class="cancelBtn"
                      style="
                        width: 45px;
                        height: 40px;
                        margin-left: 0px !important;
                      "
                      v-else
                      >{{ item.sortCode }}</el-button
                    >
                  </el-tooltip>
                </el-col>
              </template>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xl="20" :lg="18" :md="16" :sm="17" class="checkInfo">
          <div class="itemTitle">
            <h4>{{ titleIndex + 1 }}、{{ info.content }}</h4>
            <p>{{ info.illustration }}</p>
          </div>
          <el-table :data="tableList" border style="width: 100%">
            <el-table-column
              prop="scale"
              label="评分标准"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="score"
              label="自评得分"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="exeam"
              label="考核评定"
              align="center"
            ></el-table-column>
          </el-table>
          <el-row class="selfReport">
            <el-col :span="24">自评说明：</el-col>
            <el-col :span="24">
              <p v-if="info.selfIllustration">
                {{ info.selfIllustration }}
              </p>
              <p v-else>--</p>
            </el-col>
          </el-row>
          <el-row class="selfReport">
            <el-col :span="24" :style="{ marginBottom: '14px' }"
              >自评支持材料：</el-col
            >
            <el-col :span="24">
              <el-row class="material">
                <template v-for="(item, index) in selfEvaluateFileList">
                  <el-col
                    :lg="8"
                    :md="8"
                    :sm="12"
                    class="fileInfo"
                    :key="index"
                  >
                    <el-col
                      :span="3"
                      v-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'jpg' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'png' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'gif' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'jpeg'
                      "
                      ><img
                        src="/static/img/jpg.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'doc' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'docx'
                      "
                      ><img
                        src="/static/img/word.png"
                        alt=""
                        width="28"
                        height="28"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'pdf'
                      "
                      ><img
                        src="/static/img/pdf.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'rar'
                      "
                      ><img
                        src="/static/img/rar.png"
                        alt=""
                        width="28"
                        height="28"
                    /></el-col>
                    <el-col :span="3" v-else
                      ><img
                        src="/static/img/undefined.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>

                    <el-col :span="20" class="fileName">
                      <div>
                        {{ item.originalName }}
                        <span>（{{ item.fileSize % 1024 }}k）</span>
                      </div>
                      <div
                        v-if="
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'jpg' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'png' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'jpeg' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'gif' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'pdf' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'txt'
                        "
                      >
                        <a
                          target="_blank"
                          :href="item.absolutePath"
                          :style="{ color: '#409eff' }"
                          >打开</a
                        >
                      </div>
                      <div v-else>
                        <a
                          @click="downLoad(item.absolutePath)"
                          :style="{ color: '#409eff' }"
                          >下载</a
                        >
                      </div>
                    </el-col>
                  </el-col>
                </template>
                <div v-if="selfEvaluateFileList.length == 0">--</div>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="selfReport" v-if="info.assessEvaluateStatus == 1">
            <el-col :span="24">考核评定说明：</el-col>
            <el-col :span="24">
              <p v-if="info.assessIllustration">
                {{ info.assessIllustration }}
              </p>
              <p v-else>--</p>
            </el-col>
          </el-row>
          <el-row class="selfReport" v-if="info.assessEvaluateStatus == 1">
            <el-col :span="24" :style="{ marginBottom: '14px' }"
              >评定支持材料：</el-col
            >
            <el-col :span="24">
              <el-row class="material">
                <template v-for="(item, index) in assessEvaluateFileList">
                  <el-col
                    :lg="8"
                    :md="8"
                    :sm="12"
                    class="fileInfo"
                    :key="index"
                  >
                    <el-col
                      :span="3"
                      v-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'jpg' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'png' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'gif' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'jpeg'
                      "
                      ><img
                        src="/static/img/jpg.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'doc' ||
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'docx'
                      "
                      ><img
                        src="/static/img/word.png"
                        alt=""
                        width="28"
                        height="28"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'pdf'
                      "
                      ><img
                        src="/static/img/pdf.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>
                    <el-col
                      :span="3"
                      v-else-if="
                        item.originalName
                          .substr(item.originalName.lastIndexOf('.'))
                          .slice(1)
                          .toLowerCase() == 'rar'
                      "
                      ><img
                        src="/static/img/rar.png"
                        alt=""
                        width="28"
                        height="28"
                    /></el-col>
                    <el-col :span="3" v-else
                      ><img
                        src="/static/img/undefined.png"
                        alt=""
                        width="24"
                        height="24"
                    /></el-col>

                    <el-col :span="20" class="fileName">
                      <div>
                        {{ item.originalName }}
                        <span>（{{ item.fileSize % 1024 }}k）</span>
                      </div>
                      <div
                        v-if="
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'jpg' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'png' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'jpeg' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'gif' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'pdf' ||
                          item.originalName
                            .substr(item.originalName.lastIndexOf('.'))
                            .slice(1)
                            .toLowerCase() == 'txt'
                        "
                      >
                        <a
                          target="_blank"
                          :href="item.absolutePath"
                          :style="{ color: '#409eff' }"
                          >打开</a
                        >
                      </div>
                      <div v-else>
                        <a
                          @click="downLoad(item.absolutePath)"
                          :style="{ color: '#409eff' }"
                          >下载</a
                        >
                      </div>
                    </el-col>
                  </el-col>
                </template>
                <div v-if="assessEvaluateFileList.length == 0">--</div>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="upToNextBtn">
            <el-button class="checkBtn" @click="goPre" plain>上一项</el-button>
            <el-button class="checkBtn" @click="goNext" plain>下一项</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import uploadInput from '@/components/publicCom/uploadInput.vue'
export default {
  name: 'selfEvalutionResult',
  data() {
    return {
      selfEvaluateFileList: '',
      assessEvaluateFileList: '',
      noNum: '',
      name: '',
      status: '',
      titleIndex: 0,
      assessId: '',
      isCheck: false,
      isChecking: false, //正在被考核项
      //表格数据
      info: {},
      tableList: [{ scale: '', score: '--', exeam: '--' }],
      btsList: [],
      upLoadFile: [],
      uploadUrl: 'api-f/files/upload',
      formRules: {
        selfEvaluateScore: [
          {
            required: true,
            message: '评分不能为空',
            trigger: 'blur',
          },
        ],
        selfIllustration: [
          {
            required: true,
            message: '自评说明不能为空',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  components: {
    uploadInput,
  },
  created() {
    this.id = this.$route.query.id
    this.status = this.$route.query.status
    this.assessId = this.$route.query.assessId
    this.name = this.$route.query.name
    this.getDetail(this.id)
    //this.getBtsList(this.assessId)
  },
  methods: {
    goPre() {
      var ct = this.btsList.length
      this.titleIndex = this.titleIndex - 1
      if (this.titleIndex < 0) {
        this.titleIndex = ct - 1
      }
      this.getDetail(this.btsList[this.titleIndex].id)
    },
    goNext() {
      var ct = this.btsList.length

      this.titleIndex = this.titleIndex + 1
      if (this.titleIndex >= ct) {
        this.titleIndex = 0
      }
      this.getDetail(this.btsList[this.titleIndex].id)
    },
    tooltipIndex(index, itemId) {
      this.titleIndex = index
      this.getDetail(itemId)
    },
    getBtsList(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/assessdetailpage',
        data: {
          pageNo: 1,
          pageSize: 9999,
          assessId: this.assessId,
        },
      })
        .then((response) => {
          this.btsList = response.data.result.results
          this.getDetail(this.btsList[this.titleIndex].id)
          this.btsList.forEach((item, index) => {
            if (item.id == this.id) {
              this.titleIndex = index
            }
          })
        })
        .catch((error) => {})
    },
    getDetail(id) {
      this.id = id
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/selfassessdetailinfo',
        data: {
          id: id,
        },
      })
        .then((response) => {
          this.info = response.data.result
          ;(this.info.allScore =
            this.info.allScore == null || this.info.allScore == 0
              ? '--'
              : this.info.allScore + '分'),
            (this.info.allSelfEvaluateScore =
              this.info.allSelfEvaluateScore == null ||
              this.info.allSelfEvaluateScore == 0
                ? '--'
                : this.info.allSelfEvaluateScore + '分'),
            (this.info.allAssessEvaluateScore =
              this.info.allAssessEvaluateScore == null ||
              this.info.allAssessEvaluateScore == 0
                ? '--'
                : this.info.allAssessEvaluateScore + '分')
          ;(this.info.referScore =
            this.info.referScore == null || this.info.referScore == 0
              ? '--'
              : this.info.referScore + '分'),
            (this.info.selfEvaluateScore =
              this.info.selfEvaluateScore == null ||
              this.info.selfEvaluateScore == 0
                ? '--'
                : this.info.selfEvaluateScore + '分'),
            (this.info.assessEvaluateScore =
              this.info.assessEvaluateScore == null ||
              this.info.assessEvaluateScore == 0
                ? '--'
                : this.info.assessEvaluateScore + '分')
          ;(this.selfEvaluateFileList = JSON.parse(
            this.info.selfEvaluateFileList
          )),
            (this.assessEvaluateFileList = JSON.parse(
              this.info.assessEvaluateFileList
            )),
            (this.tableList = [
              {
                scale: this.info.referScore,
                score: this.info.selfEvaluateScore,
                exeam: this.info.assessEvaluateScore,
              },
            ])

          var ct = 0
          this.btsList = this.info.saveStatus
          this.btsList.forEach((item, index) => {
            if (item.id == this.id) {
              this.titleIndex = index
            }
            if (item.status == 0) {
              ct++
            }
          })

          this.noNum = ct
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.push({
        path: '/home/checkAffairs/checkQueryProofList',
        name: 'checkQueryProofList',
        query: {
          id: this.assessId,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkQuery',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
    successCallBack() {},
    errorCallBack() {},
    //下载操作手册
    downLoad(url) {
      window.open(url)
    },
  },
}
</script>

<style scoped lang="less">
// .container {
//     padding: 24px;
// }
.mainColor {
  color: #009588;
}

.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 94px;
  padding: 10px 0 10px 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    padding-top: 14px;
    color: #333;
    .explain {
      padding: 5px 0 0 30px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
    }
  }
  .rightBox {
    text-align: center;
    float: right;
    div {
      float: left;
      &:first-child {
        margin-right: 10px;
      }
      &:nth-child(2) {
        margin-right: 16px;
      }
      &:nth-child(3) {
        margin-right: 24px;
      }
    }
  }
  .saveBtn {
    margin: 0 24px 0 0 !important;
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 94px);
  overflow-y: auto;
  .checkItems {
    border-right: 2px dashed #ebeef5;
    .itemBox {
      margin-top: 20px;
      .itemBtn {
        width: 45px;
        height: 40px;
        margin-bottom: 10px;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        padding: 0;
        text-align: center;
      }
    }
  }
  .checkInfo {
    padding-left: 40px;
    color: #333;
    font-size: 14px;
    .itemTitle {
      margin-bottom: 20px;
      p {
        margin-left: 25px;
        font-size: 14px;
        color: #999;
      }
    }
    .selfReport {
      margin: 24px 0;
      p {
        width: 100%;
        word-break: break-all;
        margin-top: 14px;
        line-height: 24px;
        color: #999;
        font-size: 14px;
      }
      .material {
        font-size: 12px;
        .fileInfo {
          margin: 0 0 10px 0;
          img {
            /*width: 28px;*/
            /*height: 28px;*/
            margin-top: 3px;
          }
          .fileName {
            /*width: 100%;*/
            div {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        span {
          color: #999;
        }
        .el-link {
          font-size: 12px;
        }
      }
    }
    .upToNextBtn {
      float: right;
    }
  }
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
/deep/ .el-input {
  width: 95%;
}
.saveBtn {
  padding: 10px 20px;
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}

//已考核
.checkBtn {
  border-color: #009588 !important;
  color: #009588 !important;
  &:hover {
    background: rgba(0, 149, 136, 0.1) !important;
  }
}
.theme_default .checkBtn {
  border-color: #3189ea !important;
  color: #3189ea !important;
  &:hover {
    background-color: #eaf3fc !important;
  }
}
.checkingBtn {
  background: #009588 !important;
  color: #fff !important;
  &:hover {
    opacity: 0.8 !important;
  }
}
.theme_default .checkingBtn {
  background: #3189ea !important;
  color: #fff !important;
}
.el-tooltip__popper {
  max-width: 20% !important;
  word-break: break-all;
}
.checkingBtn:hover {
  border-color: transparent;
}
</style>
